<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>书架</title>
    <link rel="stylesheet" href="/static/css/hui.css">
</head>

<body>
    <header class="hui-header">
        <div id="hui-back"></div>
        <h1>我的书架&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
    </header>

    <div class="hui-wrap">
        {% for book in books %}
        <div class="hui-swipe-do">
            <div class="hui-swipe-do-doms hui-list-text" style="width: 555px;">

                <div class="hui-swipe-do-content" style="width: 415px;">
                    <div style="line-height:30px; padding:10px 8px;">
                        <span class="bookName">{{book.bookName}}</span>
                        <h2 class="bookID" style="display: none">{{book.bookID}}</h2>
                    </div>
                </div>
                <div class="hui-swipe-do-btn hui-swipe-do-btn-gray" onclick="bookDetails(this);" style="height: 50px; line-height: 50px;">详情</div>
                <div class="hui-swipe-do-btn" onclick="giveBack(this);" style="height: 50px; line-height: 50px;">还书</div>
            </div>
        </div>
        {% endfor %}

        <button type="button" onclick="history.back(-1)" class="hui-button hui-button-large hui-danger" style="margin-top:15px;">返回</button>
    </div>


    <script src="/static/js/hui.js"></script>
    <script type="text/javascript" src="/static/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/static/js/hui.js"></script>

    <script>
        //书本详情
        function bookDetails(cdom) {
            var bookId = $(cdom).siblings().find('h2').text();
            hui.open('http://127.0.0.1:5000/bookDetails/' + bookId);

        }

        //还书
        function giveBack(cdom) {
            var bookId = $(cdom).siblings().find('h2').text();


            hui.confirm('归还书本ID：' + bookId, ['取消', '确定'], function () {
                $.ajax({
                    url: 'http://127.0.0.1:5000/giveBack/',
                    type: 'POST',
                    cache: false,
                    dataType: 'json',
                    data: { bookId: bookId },
                    success: (data) => {
                        console.log(data.message)
                        var dDom = hui(cdom).parent().parent();
                        dDom.hide(true);
                        setTimeout(function () { dDom.remove(); }, 300);
                    }
                })
            });




        }
    </script>
</body>

</html>